<template>
    <div id="auditUser">
        <el-table :data="userData"  border style="width: 100%" >
            <el-table-column fixed prop="username" label="用户名" width="150">
            </el-table-column>
            <el-table-column prop="phone" label="手机号"  width="250">
            </el-table-column>
            <el-table-column prop="email"  label="邮箱号"  width="350">
            </el-table-column>
            <el-table-column  prop="idcard" label="身份证号" width="400">
            </el-table-column>
            <el-table-column label="身份证照片" width="150">
                <template slot-scope="scope">
                 <el-image style="width: 100px; height: 100px" :src="scope.row.idcardPic" fit="contain"></el-image>
                </template>
            </el-table-column>
            <el-table-column  prop="recommenderId" label="推荐人id" width="100">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">                
                <el-button type="text" size="small" @click="beginAuditUser(scope.row)">审核</el-button>
            </template>
            </el-table-column>
        </el-table>

        <el-pagination  background layout="prev, pager, next"
            :total="this.pageData.total" :current-page="this.pageData.pageIndex" 
            :page-size="this.pageData.pageSize" @current-change="handlerPageChange">
            </el-pagination>

        <el-dialog title="用户审核" :visible.sync="dialogVisible" width="60%" >
            <el-descriptions class="margin-top"  :column="3" :size="size" border>
                <el-descriptions-item label-class-name="mylabel" content-class-name="mycontent1">
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        用户名
                    </template>
                    {{rowdata.username}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="mylabel" content-class-name="mycontent2">
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        手机号
                    </template>
                    {{rowdata.phone}}
                </el-descriptions-item>

                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        邮箱号
                    </template>
                    {{rowdata.email}}
                </el-descriptions-item>
                 <el-descriptions-item label-class-name="mylabel"> 
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        推荐人id
                    </template>
                    {{rowdata.recommenderId}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        身份证号
                    </template>
                    {{rowdata.idcard}}
                </el-descriptions-item>    
            </el-descriptions>
            <el-descriptions class="margin-top"  :column="1" :size="size" border>
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        身份证照片
                    </template>                    
                         <el-image style="width: 500px; height: 350px" :src="rowdata.idcardPic" fit="contain"></el-image>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        审核意见
                    </template>                    
                  
                    <el-input type="textarea" :rows="2" maxlength="20" show-word-limit  placeholder="请输入审核意见" v-model="message"></el-input>
                </el-descriptions-item>      
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        审核结果
                    </template>                    
                    <template>
                        <el-radio v-model="isAudit" label="1">不予通过</el-radio> 
                        
                        <el-radio v-model="isAudit" label="2">通过</el-radio>
                    </template>
                </el-descriptions-item> 
            </el-descriptions>

            <span slot="footer" class="dialog-footer">
                <el-button @click="cansleAudit">取 消</el-button>
                <el-button type="primary" @click="confirmAudit">确 定</el-button>
            </span>
        </el-dialog>
    </div> 
</template>

<script>
    export default {
        name:"auditUser",
        inject:['reload'],
        data() {
            return {
                userData:[],
                dialogVisible:false,
                size:'',
                rowdata:'',
                isAudit:'1',
                message:'',
                pageData:{
                    total:0,
                    pageIndex:1,
                    pageSize:3
                },
            }
        },
        methods: {
            handlerPageChange(page){
                this.pageData.pageIndex=page;
                this.getNeedAuditUser();
            },
            confirmAudit(){
                let form={
                    userId:this.rowdata.userId,
                    managerId:localStorage.getItem("managerId"),
                    isaudit:this.isAudit,
                    message:this.message
                };
                
                this.$axios.post('/confirmAuditUser',form)
                .then(resp=>{
                    if(resp.data.success){
                        this.$message({
                            message:"审核提交成功",
                            type:"success"
                        })
                    }else{
                        this.$message({
                            message:resp.data.message,
                            type:"warning"
                        })
                    }
                   this.reload()
                })
                .catch(error=>{
                    this.$message.error('系统未知错误，审核提交失败');
                    console.log(error);
                })
                this.dialogVisible=false;
            },
            cansleAudit(){
                this.dialogVisible = false;
                this.isAudit='1';
                this.message="";
            },
            beginAuditUser(row){
                this.dialogVisible=true;
                this.rowdata=row;
            },
             getNeedAuditUser() {
                 this.$axios.get('/getNeedAuditUser',{params:{
                     pageIndex:this.pageData.pageIndex
                 }})
                .then(resp=>{
                    if(resp.data.data.records.length==0){
                        this.$message({
                            message:"您真棒，所有的用户都已经审核了",
                            type:"success"
                        })
                    }else{
                        this.userData=resp.data.data.records; 
                        Object.assign(this.pageData,resp.data.data);
                    }
                })
                .catch(error=>{
                    this.$message.error('系统未知错误');
                    console.log(error);
                })
            }
        },
        mounted(){
           this.getNeedAuditUser();
        }
    }
</script>

<style>
.mylabel{
    width:100px;
}

.mycontent1{
    width:80px;
}
.mycontent2{
    width:120px;
}
</style>